import React, { memo } from 'react';

import { NavLink } from "react-router-dom";
import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";

import { headerLinks } from "@/common/local-data";

import { 
  HeaderWrapper,
  ContentLeft,
  ContentRight
 } from "./style";

const MyAppHeader = memo(() => {
  
  /**
   * @param {每一项link} item 
   * @param {每一项索引} index 
   * @returns 
   *  前三个是路由，else是超链接
   */
  const selectShowItem = (item, index) => {
    if (index < 3) {
      return <NavLink to={item.link}>
        {item.title}
        <i className="icon sprite_01"></i>
        </NavLink>
    } else {
      return <a href={item.link} target="_blank" rel="noopener noreferrer">{item.title}</a>
    }
  }

  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <ContentLeft>
          <a href="#/" className="logo sprite_01">my music</a>

          <div className="select-list">
            {
              headerLinks.map((item, index) => {
                return (
                  <div key={item.title} className="select-item">
                    {selectShowItem(item, index)}
                  </div>
                )
              })
            }
          </div>
        </ContentLeft>

        <ContentRight>
          <Input className="search" prefix={<SearchOutlined />} placeholder="音乐/视频/电台/用户" />
          <div className="center">创作者中心</div>
          <div className="login">登录</div>
        </ContentRight>
      </div>

      <div className="divider"></div>
    </HeaderWrapper>
  )
})

export default MyAppHeader